<template>
  <div class="mine">
    <div class="introduce">
      <div class="avatar">
        <img v-if="userInfo.avatar" :src="userInfo.avatar" />
        <img src="@/assets/image/mine/avatar.png" v-else />
      </div>
      <div class="box">
        <div class="name">{{ userInfo.name }}</div>
        <div class="role">
          <!-- <van-tag mark :type="userInfo.auditStatus !== 2 ? 'warning' : 'success'">
            {{ userInfo.auditStatus !== 2 ? '未认证' : '已认证' }}
          </van-tag> -->
        </div>
      </div>
      <van-icon name="setting-o" class="icon__setting" @click="goSetting" />
    </div>
    <div class="setting">
      <van-cell
        :title="item.title"
        :is-link="item.route ? true : false"
        :value="item.memo"
        v-for="item in settingList"
        :key="item.id"
        @click="handleSettingClick(item)"
      >
        <template #title>
          <div v-if="item.id === 1">
            <div
              class="setting__item"
              :style="{
                backgroundImage: `url(${item.iconUrl})`,
                backgroundPosition: '0, center',
                backgroundRepeat: 'no-repeat'
              }"
            >
              {{ item.title }}
            </div>
          </div>
          <div
            v-else
            class="setting__item"
            :style="{
              backgroundImage: `url(${item.iconUrl})`,
              backgroundPosition: '0, center',
              backgroundRepeat: 'no-repeat'
            }"
          >
            {{ item.title }}
          </div>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted, watchEffect } from 'vue'
import { Dialog } from 'vant'
import { useRouter } from 'vue-router'
import store from '@/store/index'
import { UserInfo, FinanceWallet } from '@/store/user/types'
import logoutIcon from '@/assets/image/mine/logout_icon.png'
import walletIcon from '@/assets/image/mine/wallet_icon.png'
import versionIcon from '@/assets/image/mine/version_icon.png'
import customerIcon from '@/assets/image/mine/customer_icon.png'
import JsBridge from '@/utils/jsBridge'
import { NATIVE_TYPE } from '@/type'

type Mine = {
  userInfo: UserInfo
  financeWallet: FinanceWallet
  settingList: any[]
  [propname: string]: any
}

export default defineComponent({
  name: 'Mine',
  components: {
    [Dialog.Component.name]: Dialog
  },
  setup() {
    const getUserInfo = async (data: Mine): Promise<void> => {
      const userInfo = await store.dispatch('user/handleGetUserInfo')
      data.userInfo = userInfo
    }

    const currentVersions = ref('')
    const data = reactive<Mine>({
      userInfo: {} as UserInfo,
      financeWallet: {} as FinanceWallet,
      settingList: [
        {
          id: 2,
          title: '我的钱包',
          memo: '-',
          iconUrl: walletIcon
        },
        {
          id: 3,
          title: '联系客服',
          memo: '',
          route: '/',
          iconUrl: customerIcon
        },
        {
          id: 998,
          title: '当前版本号',
          memo: currentVersions,
          iconUrl: versionIcon
        },
        {
          id: 999,
          title: '退出登录',
          route: '/login',
          iconUrl: logoutIcon
        }
      ]
    })

    /** 事件专区 */
    const router = useRouter()

    getUserInfo(data)
    const handleGetFinanceWalletUser = async (): Promise<void> => {
      const result: FinanceWallet = await store.dispatch('user/handleGetFinanceWalletUser')
      data.financeWallet = result

      result && (data.settingList[0].memo = `¥${result.activeAmount}`)
    }

    const handleSettingClick = async (item: any): Promise<void> => {
      switch (item.id) {
        case 1:
          router.push({ name: 'Certificates' })
          break
        case 2:
          router.push({ name: 'MineWallet', query: { auditStatus: data.userInfo.auditStatus } })
          break
        case 3:
          {
            const config = store.getters['user/getSystemConfigs']
            let customerTel = ''
            if (JSON.stringify(config) === '{}') {
              customerTel = await store.dispatch('user/handleInitSystemTel')
            } else {
              customerTel = config['tel']
            }
            window.location.href = `tel:${customerTel}`
          }
          break
        case 998:
          updateVersions()
          break
        case 999:
          Dialog.confirm({
            title: '退出登录',
            message: '您是否退出登录'
          })
            .then(() => {
              store.dispatch('user/handleLogout')
              router.push({ name: 'Login' })
            })
            .catch(() => {
              //
            })
          break
        default:
          break
      }
    }

    // 去认证
    const goValidate = (): void => {
      router.push({ name: 'Certificates' })
    }

    // 去设置页面
    const goSetting = (): void => {
      router.push({
        name: 'MineSetting'
      })
    }

    /** 操作区域 */
    data.userInfo = store.getters['user/getUserInfo']
    handleGetFinanceWalletUser()

    //安卓检查版本更新
    const updateVersions = () => {
      const userAgent = navigator.userAgent
      if (userAgent.indexOf('_Web') != -1) {
        let isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1 //安卓
        if (isAndroid) {
          JsBridge.jsCallNative(NATIVE_TYPE.UPDATE_VERSIONS, {})
        }
      }
    }

    watchEffect(() => {
      currentVersions.value = store.state.system.currentVersions
    })

    onMounted(() => {
      JsBridge.jsCallNative(NATIVE_TYPE.VERSIONS, {})
    })

    return {
      ...toRefs(data),
      handleSettingClick,
      goValidate,
      goSetting
    }
  }
})
</script>

<style lang="scss" scope>
@import '@/style/variables.scss';
.mine {
  width: 100%;
  height: 100%;
  background-color: $background-color-base;
  position: relative;
  .setting__item {
    background-size: 28px 28px;
    text-indent: 35px;
    line-height: 28px;
  }
  .tip {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 44px;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20px;
    span {
      color: white;
    }
    button {
      background: #409eff;
      border: none;
      height: 26px;
      line-height: 26px;
    }
  }
  .icon__setting {
    position: absolute;
    right: 20px;
    top: 66px;
    color: white;
    font-size: 20px;
  }
  .introduce {
    width: 100%;
    padding: 66px 24px 30px 24px;
    box-sizing: border-box;
    display: flex;
    height: 327px;
    background: url('../../assets/image/mine/bg.png') 0 0 no-repeat;
    background-size: 100% auto;
    .box {
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      box-sizing: border-box;
      overflow: hidden;
      margin-right: 20px;
      background: #97cbff;
      padding: 4px;
      img {
        width: 100%;
        display: block;
      }
    }
    .name {
      color: white;
      font-size: 16px;
      font-weight: bold;
      line-height: 22px;
    }
    .role {
      color: white;
      font-size: 14px;
      line-height: 20px;
    }
  }
  .setting {
    padding: 48px 12px;
    box-sizing: border-box;
    position: relative;
    transform: translateY(-210px);
    .van-cell {
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0px 3px 12px 0px rgba(151, 151, 151, 0.12);
      border-radius: 8px;
      padding: 24px 29px 24px 26px;
      margin-bottom: 15px;
      &__value,
      &__right-icon {
        font-size: 14px;
        color: #575c72;
        line-height: 28px;
      }
    }
  }
}
</style>
